<template>
  <div class="body">
    <div class="background"></div>
    <div class="main1">
      <img
        src="../assets/tree/tree.png"
        class="tree"
        alt=""
        style="
          width: 600px;
          height: 600px;
          position: absolute;
          left: -10px;
          top: 105px;
        "
      />
      <svg width="800" height="600"></svg>
    </div>
    <div class="aside">
      <div class="topside">
        <div class="treeline">
          <svg width="890" height="500"></svg>
        </div>
        <div class="tree1" v-if="isShow[0]">
          <img
            :src="require('../assets/' + imgUrl[0])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="700" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>东吴</p>
          </div>
        </div>
        <div class="tree2" v-if="isShow[1]">
          <img
            :src="require('../assets/' + imgUrl[1])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>晋</p>
          </div>
        </div>
        <div class="tree3" v-if="isShow[2]">
          <img
            :src="require('../assets/' + imgUrl[2])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>东晋</p>
          </div>
        </div>
        <div class="tree4" v-if="isShow[3]">
          <img
            :src="require('../assets/' + imgUrl[3])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>南朝</p>
          </div>
        </div>
        <div class="tree5" v-if="isShow[4]">
          <img
            :src="require('../assets/' + imgUrl[4])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>唐</p>
          </div>
        </div>
        <div class="tree6" v-if="isShow[5]">
          <img
            :src="require('../assets/' + imgUrl[5])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>南唐</p>
          </div>
        </div>
        <div class="tree7" v-if="isShow[6]">
          <img
            :src="require('../assets/' + imgUrl[6])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>宋</p>
          </div>
        </div>
        <div class="tree8" v-if="isShow[7]">
          <img
            :src="require('../assets/' + imgUrl[7])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>元</p>
          </div>
        </div>
        <div class="tree9" v-if="isShow[8]">
          <img
            :src="require('../assets/' + imgUrl[8])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>明</p>
          </div>
        </div>
        <div class="tree10" v-if="isShow[9]">
          <img
            :src="require('../assets/' + imgUrl[9])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>清</p>
          </div>
        </div>
        <div class="tree11" v-if="isShow[10]">
          <img
            :src="require('../assets/' + imgUrl[10])"
            style="
              width: 170px;
              height: 250px;
              position: absolute;
              top: 0;
              right: 20px;
            "
          />
          <svg width="200" height="270">
            <circle r="5" cx="100" cy="260"></circle>
          </svg>
          <div class="p">
            <p>现当代</p>
          </div>
        </div>
        <div v-show="show" class="name">
          <p>{{ fonts[size - 7] }}</p>
        </div>
        <div v-show="show" class="name1">
          <p>{{ fonts[size - 6] }}</p>
        </div>
        <div v-show="show" class="name2">
          <p>{{ fonts[size - 5] }}</p>
        </div>
        <div v-show="show" class="name3">
          <p>{{ fonts[size - 4] }}</p>
        </div>
        <div v-show="show" class="name4">
          <p>{{ fonts[size - 3] }}</p>
        </div>
        <div v-show="show" class="name5">
          <p>{{ fonts[size - 2] }}</p>
        </div>
        <div v-show="show" class="name6">
          <p>{{ fonts[size - 1] }}</p>
        </div>
        <div v-show="show" class="name7">
          <p>{{ fonts[size - 0] }}</p>
        </div>
      </div>
      <div class="buttonside">
        <div v-show="show" class="container1" id="container1"></div>
        <h1 v-show="show" class="dynasty">{{ dynasty }}</h1>
        <p v-show="!show" class="title1">古韵新生-{{ title }}</p>
        <p v-show="!show" class="text">&nbsp;&nbsp;&nbsp;{{ text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tree",
  data() {
    return {
      dynasty: "东吴",
      portey: {},
      mychart: "",
      node: {},
      Url: [],
      fonts: [],
      fontsize: [],
      size: 7,
      headdata: [],
      data: [],
      show: false,
      title: "sx",
      text: "xxxxx",
      imgUrl: [
        "tree/1.png",
        "tree/2.png",
        "tree/0.png",
        "tree/0.png",
        "tree/0.png",
        "tree/0.png",
        "tree/0.png",
        "tree/0.png",
        "tree/0.png",
        "tree/0.png",
        "tree/0.png",
      ],
      isShow: [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
      ],
    };
  },
  methods: {
    draw() {
      const that = this;
      function drawCirle(className, x, y, name, color, index) {
        d3.select("svg")
          .append("circle")
          .attr("class", className)
          .classed(name, true)
          .classed(that.fonts[index], true)
          .attr("fill", color)
          .attr("opacity", "0.7")
          .attr("cx", x)
          .attr("cy", y)
          .attr("r", 7)
          .style("z-index", 1);
        d3.selectAll("." + className)
          .on("mouseover", function (d, i) {
            that.changeText(index);
            that.changepoetr(this.className.baseVal.split(" ")[1]);

            d3.selectAll("." + this.className.baseVal.split(" ")[0]).classed(
              "shader",
              true
            );
            const e = d3.event;
            const position = d3.mouse(d3.select("svg").node());
            e.target.style.cursor = "hand";
            d3.select("svg")
              .append("text")
              .classed("tip", true)
              .attr("x", position[0] - 10)
              .attr("y", position[1] - 30)
              .attr("fill", "red")
              .text(this.className.baseVal.split(" ")[1]);
          })
          .on("mouseleave", function () {
            const e = d3.event;
            d3.select(".tip").remove();
            d3.selectAll(".shader").classed("shader", false);
            that.show = false;
          })
          .on("click", function () {
            that.changetree(this.className.baseVal.split(" ")[1]);
            that.size = index;
            that.mychart.dispose();
            that.drawbar();
            that.show = true;
            if (d3.select(".treeline").select("line").empty()) {
              d3.select(".treeline")
                .select("svg")
                .append("line")
                .attr("class", "line")
                .attr("x1", 0)
                .attr("y1", 390)
                .attr("x2", 0)
                .attr("y2", 390)
                .transition()
                .attr("x2", 880)
                .attr("style", "stroke:rgb(99,99,99);stroke-width:4");
            } else {
              d3.select(".treeline").select("svg").select("line").remove();
              d3.select(".treeline")
                .select("svg")
                .append("line")
                .attr("class", "line")
                .attr("x1", 0)
                .attr("y1", 390)
                .attr("x2", 0)
                .attr("y2", 390)
                .transition()
                .attr("x2", 880)
                .attr("style", "stroke:rgb(99,99,99);stroke-width:4");
            }
          });
      }

      let i = 0;
      drawCirle("wu", 80, 450, this.fonts[i], "#2ec7c9", i);
      i++;
      drawCirle("wu", 110, 460, this.fonts[i], "#2ec7c9", i);
      i++;
      drawCirle("wu", 140, 430, this.fonts[i], "#2ec7c9", i);
      i++;
      drawCirle("wu", 160, 480, this.fonts[i], "#2ec7c9", i);
      i++;
      drawCirle("wu", 230, 410, this.fonts[i], "#2ec7c9", i);
      i++;
      drawCirle("wu", 200, 470, this.fonts[i], "#2ec7c9", i);
      i++;
      drawCirle("wu", 200, 430, this.fonts[i], "#2ec7c9", i);
      i++;
      drawCirle("wu", 170, 400, this.fonts[i], "#2ec7c9", i);
      i++;

      drawCirle("djin", 170, 260, this.fonts[i], "#ee0de9", i);
      i++;
      drawCirle("djin", 230, 260, this.fonts[i], "#ee0de9", i);
      i++;
      drawCirle("djin", 160, 230, this.fonts[i], "#ee0de9", i);
      i++;
      drawCirle("djin", 160, 280, this.fonts[i], "#ee0de9", i);
      i++;
      drawCirle("djin", 200, 210, this.fonts[i], "#ee0de9", i);
      i++;
      drawCirle("djin", 190, 280, this.fonts[i], "#ee0de9", i);
      i++;
      drawCirle("djin", 140, 190, this.fonts[i], "#ee0de9", i);
      i++;
      drawCirle("djin", 170, 180, this.fonts[i], "#ee0de9", i);
      i++;

      drawCirle("jin", 170, 360, this.fonts[i], "#e30953", i);
      i++;
      drawCirle("jin", 260, 330, this.fonts[i], "#e30953", i);
      i++;
      drawCirle("jin", 140, 330, this.fonts[i], "#e30953", i);
      i++;
      drawCirle("jin", 230, 290, this.fonts[i], "#e30953", i);
      i++;
      drawCirle("jin", 200, 310, this.fonts[i], "#e30953", i);
      i++;
      drawCirle("jin", 190, 370, this.fonts[i], "#e30953", i);
      i++;
      drawCirle("jin", 210, 390, this.fonts[i], "#e30953", i);
      i++;
      drawCirle("jin", 280, 380, this.fonts[i], "#e30953", i);
      i++;

      drawCirle("nanchao", 385, 410, this.fonts[i], "#4ac7fc", i);
      i++;
      drawCirle("nanchao", 425, 430, this.fonts[i], "#4ac7fc", i);
      i++;
      drawCirle("nanchao", 390, 430, this.fonts[i], "#4ac7fc", i);
      i++;
      drawCirle("nanchao", 430, 490, this.fonts[i], "#4ac7fc", i);
      i++;
      drawCirle("nanchao", 360, 390, this.fonts[i], "#4ac7fc", i);
      i++;
      drawCirle("nanchao", 440, 450, this.fonts[i], "#4ac7fc", i);
      i++;
      drawCirle("nanchao", 400, 460, this.fonts[i], "#4ac7fc", i);
      i++;
      drawCirle("nanchao", 380, 480, this.fonts[i], "#4ac7fc", i);
      i++;
      drawCirle("tang", 322, 300, this.fonts[i], "#21a850", i);
      i++;
      drawCirle("tang", 320, 330, this.fonts[i], "#21a850", i);
      i++;
      drawCirle("tang", 280, 360, this.fonts[i], "#21a850", i);
      i++;
      drawCirle("tang", 260, 290, this.fonts[i], "#21a850", i);
      i++;
      drawCirle("tang", 270, 310, this.fonts[i], "#21a850", i);
      i++;
      drawCirle("tang", 325, 350, this.fonts[i], "#21a850", i);
      i++;
      drawCirle("tang", 310, 290, this.fonts[i], "#21a850", i);
      i++;
      drawCirle("tang", 340, 310, this.fonts[i], "#21a850", i);
      i++;
      drawCirle("nantang", 280, 210, this.fonts[i], "#0034ff", i);
      i++;
      drawCirle("nantang", 300, 270, this.fonts[i], "#0034ff", i);
      i++;
      drawCirle("nantang", 300, 240, this.fonts[i], "#0034ff", i);
      i++;
      drawCirle("nantang", 250, 260, this.fonts[i], "#0034ff", i);
      i++;
      drawCirle("nantang", 230, 200, this.fonts[i], "#0034ff", i);
      i++;
      drawCirle("nantang", 280, 180, this.fonts[i], "#0034ff", i);
      i++;
      drawCirle("nantang", 250, 150, this.fonts[i], "#0034ff", i);
      i++;
      drawCirle("nantang", 250, 230, this.fonts[i], "#0034ff", i);
      i++;

      drawCirle("song", 360, 210, this.fonts[i], "#d74c00", i);
      i++;
      drawCirle("song", 330, 270, this.fonts[i], "#d74c00", i);
      i++;
      drawCirle("song", 330, 240, this.fonts[i], "#d74c00", i);
      i++;
      drawCirle("song", 300, 180, this.fonts[i], "#d74c00", i);
      i++;
      drawCirle("song", 310, 200, this.fonts[i], "#d74c00", i);
      i++;
      drawCirle("song", 320, 220, this.fonts[i], "#d74c00", i);
      i++;
      drawCirle("song", 325, 170, this.fonts[i], "#d74c00", i);
      i++;
      drawCirle("song", 350, 180, this.fonts[i], "#d74c00", i);
      i++;

      drawCirle("yuan", 380, 210, this.fonts[i], "#758cf1", i);
      i++;
      drawCirle("yuan", 375, 270, this.fonts[i], "#758cf1", i);
      i++;
      drawCirle("yuan", 370, 185, this.fonts[i], "#758cf1", i);
      i++;
      drawCirle("yuan", 380, 250, this.fonts[i], "#758cf1", i);
      i++;
      drawCirle("yuan", 415, 200, this.fonts[i], "#758cf1", i);
      i++;
      drawCirle("yuan", 420, 180, this.fonts[i], "#758cf1", i);
      i++;
      drawCirle("yuan", 390, 170, this.fonts[i], "#758cf1", i);
      i++;
      drawCirle("yuan", 400, 230, this.fonts[i], "#758cf1", i);
      i++;

      drawCirle("ming", 480, 410, this.fonts[i], "#c5e829", i);
      i++;
      drawCirle("ming", 400, 370, this.fonts[i], "#c5e829", i);
      i++;
      drawCirle("ming", 460, 460, this.fonts[i], "#c5e829", i);
      i++;
      drawCirle("ming", 390, 340, this.fonts[i], "#c5e829", i);
      i++;
      drawCirle("ming", 430, 400, this.fonts[i], "#c5e829", i);
      i++;
      drawCirle("ming", 480, 380, this.fonts[i], "#c5e829", i);
      i++;
      drawCirle("ming", 450, 390, this.fonts[i], "#c5e829", i);
      i++;
      drawCirle("ming", 490, 450, this.fonts[i], "#c5e829", i);
      i++;

      drawCirle("qing", 470, 310, this.fonts[i], "#f80990", i);
      i++;
      drawCirle("qing", 410, 320, this.fonts[i], "#f80990", i);
      i++;
      drawCirle("qing", 460, 340, this.fonts[i], "#f80990", i);
      i++;
      drawCirle("qing", 435, 310, this.fonts[i], "#f80990", i);
      i++;
      drawCirle("qing", 520, 300, this.fonts[i], "#f80990", i);
      i++;
      drawCirle("qing", 430, 350, this.fonts[i], "#f80990", i);
      i++;
      drawCirle("qing", 480, 350, this.fonts[i], "#f80990", i);
      i++;
      drawCirle("qing", 500, 330, this.fonts[i], "#f80990", i);
      i++;

      drawCirle("dangdai", 480, 210, this.fonts[i], "#6727e7", i);
      i++;
      drawCirle("dangdai", 470, 270, this.fonts[i], "#6727e7", i);
      i++;
      drawCirle("dangdai", 460, 240, this.fonts[i], "#6727e7", i);
      i++;
      drawCirle("dangdai", 490, 260, this.fonts[i], "#6727e7", i);
      i++;
      drawCirle("dangdai", 440, 190, this.fonts[i], "#6727e7", i);
      i++;
      drawCirle("dangdai", 400, 280, this.fonts[i], "#6727e7", i);
      i++;
      drawCirle("dangdai", 450, 210, this.fonts[i], "#6727e7", i);
      i++;
      drawCirle("dangdai", 410, 260, this.fonts[i], "#6727e7", i);

      d3.select(".treeline")
        .select("svg")
        .append("line")
        .attr("class", "line")
        .attr("x1", 0)
        .attr("y1", 390)
        .attr("x2", 0)
        .attr("y2", 390)
        .transition()
        .attr("x2", 880)
        .attr("style", "stroke:rgb(99,99,99);stroke-width:4");
    },
    drawbar() {
      let that = this;
      var dom = document.getElementById("container1");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      that.mychart = myChart;
      var app = {};
      var option;
      const labelSetting = {
        show: true,
        position: "right",
        offset: [10, 0],
        fontSize: 16,
      };
      function makeOption(type) {
        return {
          yAxis: {
            data: [" ", " ", " ", " ", " ", "", "", ""],
            inverse: false,
            type: "category",
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              margin: 30,
              fontSize: 14,
            },
            axisPointer: {
              label: {
                show: false,
                margin: 40,
              },
            },
          },
          xAxis: {
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
          },
          animationDurationUpdate: 500,
          series: [
            {
              name: "2015",
              id: "bar1",
              type: type,
              symbolRepeat: true,
              symbolSize: ["80%", "60%"],
              barCategoryGap: "70%",
              color: "#83929b",
              universalTransition: {
                enabled: false,
                delay: function (idx, total) {
                  return (idx / total) * 1000;
                },
              },
              data: [
                {
                  value: that.fontsize[that.size - 7],
                  /*           symbol: symbol || pathSymbols.reindeer*/
                },
                {
                  value: that.fontsize[that.size - 6],
                  /*            symbol: symbol || pathSymbols.ship*/
                },
                {
                  value: that.fontsize[that.size - 5],
                  /*            symbol: symbol || pathSymbols.plane*/
                },
                {
                  value: that.fontsize[that.size - 4],
                  /*            symbol: symbol || pathSymbols.train*/
                },
                {
                  value: that.fontsize[that.size - 3],
                  /*            symbol: symbol || pathSymbols.car*/
                },
                {
                  value: that.fontsize[that.size - 2],
                  /*            symbol: symbol || pathSymbols.car*/
                },
                {
                  value: that.fontsize[that.size - 1],
                  /*            symbol: symbol || pathSymbols.car*/
                },
                {
                  value: that.fontsize[that.size - 0],
                  /*            symbol: symbol || pathSymbols.car*/
                },
              ],
            },
          ],
        };
      }
      const options = [
        /*        makeOption('pictorialBar'),*/
        makeOption("bar"),
        /*        makeOption('pictorialBar', 'diamond')*/
      ];
      that.options = options;

      var optionIndex = 0;
      option = options[optionIndex];
      setInterval(function () {
        optionIndex = (optionIndex + 1) % options.length;
        myChart.setOption(options[optionIndex]);
      }, 2500);

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    },
    changetree(value) {
      this.Url = this.node[`${value}`];
      this.isShow = this.isShow.map(function (i) {
        return false;
      });
      this.imgUrl.splice(this.Url[0], 1, "tree/0.png");
      this.imgUrl.splice(this.Url[1], 1, "tree/1.png");
      this.imgUrl.splice(this.Url[2], 1, "tree/2.png");
      this.imgUrl.splice(this.Url[3], 1, "tree/3.png");
      this.isShow.splice(this.Url[0], 1, true);
      this.isShow.splice(this.Url[1], 1, true);
      this.isShow.splice(this.Url[2], 1, true);
      this.isShow.splice(this.Url[3], 1, true);
      console.log("../assets/" + this.imgUrl[0]);
    },
    changepoetr(value) {
      this.title = value;
      this.text = this.portey[value];
    },
    changeText(value) {
      value = parseInt(value / 8);
      this.dynasty = this.headdata[value];
      console.log(value);
    },
  },
  mounted() {
    this.$axios.get("/treedata.json").then((res) => {
      this.data = res.data;
      for (const [key, values] of Object.entries(this.data.node)) {
        this.headdata.push(key);
        /*        console.log(`Key: ${key}, Value: ${values}`);*/
        for (const [key, value] of Object.entries(values)) {
          this.fonts.push(key);
          this.fontsize.push(value);
        }
      }
      this.draw();
      this.drawbar();
      this.$axios.get("/treedata1.json").then((res) => {
        const data1 = res.data;
        this.node = data1.node;
      });
      this.$axios.get("/poetry.json").then((res) => {
        this.portey = res.data;
        let name = "赋";
        this.changepoetr(name);
        this.changetree(name);
      });
    });
  },
};
</script>

<style scoped>
.background {
  width: 1510px;
  height: 750px;
  position: absolute;
  background-image: url("@/assets/背景图.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.treeline {
  position: absolute;
  left: -10px;
}

.body {
  display: flex;
  min-height: 750px;
}
.main1 {
  flex: 1;
  width: 800px;
  height: 600px;
  margin-top: 100px;
}
svg {
  margin: 0;
  padding: 0;
  z-index: 1;
}
.aside {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.topside {
  position: absolute;
  width: 800px;
  left: 600px;
  top: -100px;
}

.tree1 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: -100px;
}

.tree2 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 0px;
}

.tree3 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 0px;
}
.tree4 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 100px;
}
.tree5 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 200px;
}
.tree6 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 300px;
}
.tree7 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 400px;
}
.tree8 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 500px;
}
.tree9 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 600px;
}
.tree10 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 700px;
}
.tree11 {
  position: absolute;
  width: 200px;
  height: 500px;
  top: 130px;
  left: 750px;
}

.name {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 450px;
  left: 176px;
  font-size: 15px;
  text-align: center;
  color: #72565b;
  font-family: Lobster, cursive;
}

.name1 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 450px;
  left: 245px;
  font-size: 15px;
  text-align: center;
  color: #72565b;
  font-family: Lobster, cursive;
}

.name2 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 450px;
  left: 320px;
  font-size: 15px;
  text-align: center;
  color: #72565b;
  font-family: Lobster, cursive;
}

.name3 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 450px;
  left: 388px;
  font-size: 15px;
  text-align: center;
  color: #72565b;
  font-family: Lobster, cursive;
}

.name4 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 450px;
  left: 460px;
  font-size: 15px;
  text-align: center;
  color: #72565b;
  font-family: Lobster, cursive;
}

.name5 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 450px;
  left: 531px;
  font-size: 15px;
  text-align: center;
  color: #72565b;
  font-family: Lobster, cursive;
}

.name6 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 450px;
  left: 603px;
  font-size: 15px;
  text-align: center;
  color: #72565b;
  font-family: Lobster, cursive;
}

.name7 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 450px;
  left: 673px;
  font-size: 15px;
  text-align: center;
  color: #72565b;
  font-family: Lobster, cursive;
}
.buttonside {
  position: absolute;
  top: 600px;
}

.container1 {
  position: absolute;
  left: 100px;
  top: -380px;
  height: 700px;
  width: 350px;
  transform: rotate(90deg);
}
.p {
  position: absolute;
  left: 103px;
  bottom: 180px;
  color: #72565b;
  font-family: Lobster, cursive;
}
.title1 {
  position: absolute;
  top: -230px;
  left: 200px;
  font-size: 30px;
  width: 300px;
  font-family: "华文行楷", "STXingkai", serif;
  color: #72565b;
}
.dynasty {
  position: absolute;
  height: 500px;
  left: -150px;
  top: -140px;
  writing-mode: vertical-rl;
  line-height: 1.5;
  letter-spacing: 2rem;
  color: #72565b;
  font-size: 50px;
  font-family: "华文行楷", "STXingkai", serif;
}
.text {
  position: absolute;
  width: 500px;
  left: 0;
  top: -140px;
  font-family: Lobster, cursive;
  line-height: 1.5;
  letter-spacing: 0.2rem;
  color: #72565b;
}

.shader {
  animation: twinkling 1s infinite ease-in-out;
}

@keyframes twinkling {
  0% {
    fill: rgb(0, 42, 255);
    opacity: 1;
  }

  50% {
    fill: rgb(0, 250, 0);
    opacity: 0.5;
  }

  100% {
    fill: rgb(0, 0, 255);
    opacity: 1;
  }
}
</style>
